<div class="dbcontain _bg_dark _text_barely">
    <div class="m0auto">
        <div class="topheader">
            <span class="logo pull-left pc50 imgcontain" style="background-image:url('./static/img/logo.png')"></span>
            <span class="search pull-right tr pc50 ">
                <i class="fa fa-search"></i> <span class="searchbtn"> 搜 索</span>
            </span>
        </div>

            <div class="searchinput tran3">
                <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="请填写关键字">
                  <span class="input-group-btn">
                    <button class="btn btn-info" style="background:#3949ab;border-color:#3949ab;" type="button">确 定</button>
                  </span>
                </div><!-- /input-group -->
            </div>

    </div>
</div>

<div class="line1" style="background-color:#666;"></div>
<div class="clearfix"></div>
<div class="dbcontain _bg_dark _text_barely">
    <div class="limit-width m0auto">
        <div class="navheader">
            <ul class="clearfix">
                <li class="navitem dib tran3 lh3 pull-left <?php echo ($route == 'home')?' active ':''; ?> "> <a href="./index.php?m=home"> 首页 </a></li>
                <li class="navitem dib tran3 lh3 pull-left <?php echo ($route == 'service')?' active ':''; ?>  "> <a href="./index.php?m=service"> 我们的服务 </a></li>
                <li class="navitem dib tran3 lh3 pull-left <?php echo ($route == 'case')?' active ':''; ?>  "> <a href="./index.php?m=case"> 我们的案例 </a></li>
                <li class="navitem dib tran3 lh3 pull-left <?php echo ($route == 'about')?' active ':''; ?>  "> <a href="./index.php?m=about"> 关于我们 </a></li>
                <li class="navitem dib tran3 lh3 pull-left <?php echo ($route == 'join')?' active ':''; ?>  "> <a href="./index.php?m=join"> 加入我们 </a></li>
                <li class="navitem dib tran3 lh3 pull-left <?php echo ($route == 'contact')?' active ':''; ?>  "> <a href="./index.php?m=contact"> 联系我们 </a></li>
            </ul>
            <div class="borderline">
                <span class="activeline dib tran5"></span>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .topheader{
        position: relative;
        height:40px;
        line-height:40px;
    }

    .topheader .logo{
        height:38px;
        margin-top:1px;
        background-position: 10% 50%;
    }

    .topheader .search{
        padding-right:10%;
        cursor: pointer;
    }

    .topheader .searchbtn{
        padding:0 40px;
        margin-left:40px;
        border-left:1px solid #666;
        border-right:1px solid #666;

    }

    .searchinput {
        position: fixed;
        z-index: 2;
        right:5%;
        top:55px;
        width:200px;
        opacity: 0;
    }

    .searchinput.active{
        right:10%;
        opacity: 1;

    }

    .searchinput .close{
        margin-top:-20px;
    }

    .navheader{
        position:relative;
    }
    
   .navheader  .navitem{
        /*margin-right:15px;*/
        padding:0 20px;
        border-right:1px solid #666;

    }
   .navheader  .navitem:last-child{

        border-right:none;
        
    }
    .navheader  .navitem:hover{
        background:#333;
        color:#999;
    }

    .navheader  .navitem.active{
        background:#000;
        color:#eee;
    }

    .navheader .borderline{
        height:3px;
    }
    .navheader .borderline .activeline{
        position: absolute;
        width:0px;
        height:3px;
        background-color:#1e88e5;
        /*box-shadow:0 0 2px #ccc; */

    }
</style>

<script type="text/javascript">

$(document).ready(function(){
    
        initNavitem();
        initMainheight();


        $('.navitem').hover(
            function(){

                var activeline = $('.navheader .borderline .activeline');
                var width = $(this).innerWidth();
                var left = $(this).position().left;
                activeline.css({"left":left+'px',"width":width+'px'});

            },
            function(){
                initNavitem();
            }

        )


        $('.navitem').on('click',function(){

            $('.navitem').removeClass('active');
            $(this).addClass('active');
        })

        $('.search').on('click',function(){

            var searchinput = $('.searchinput');

            if(searchinput.hasClass('active')){
                searchinput.removeClass('active');

            }else{
                 searchinput.addClass('active');
            }

        })

        $('.searchinput .close').on('click',function(){

            $('.searchinput').removeClass('active');

        })
})



function initNavitem(){

    if($('.navheader  .navitem.active').length == 0 ) return;

    var activeline = $('.navheader .borderline .activeline');

    var activenavitem = $('.navheader  .navitem.active');

    var width = activenavitem.innerWidth();
    var left = activenavitem.position().left;
    activeline.css({"left":left+'px',"width":width+'px'});
}

function initMainheight(){
    var wheight = $(window).height();
    var bheight = $('body').height();
    var theight = $('.topheader').height();
    var nheight = $('.navheader').height();
    var mheight = $('#main').height();
    var fheight = $('.footer').height();
    var h = wheight - bheight;
    if(h>0){
        $('#main').height(h+mheight);
    }

}
</script>
